import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';

export const titleBarStyle = style({
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'stretch',
	height: '3.5em',
	borderBottom: `1px solid ${vars.color.border}`,
});

globalStyle(`${titleBarStyle}>button.bar`, {
	backgroundColor: 'transparent',
	border: 'none',
	cursor: 'default',
	color: vars.color.text,
	borderRadius: 0,
});

globalStyle(`${titleBarStyle}>button.bar:avtive`, {
	backgroundColor: vars.color.selection,
	border: 'none',
});

globalStyle(`${titleBarStyle}>div.title`, {
	flex: '1',
	userSelect: 'none',
	whiteSpace: 'nowrap',
	wordBreak: 'keep-all',
	overflow: 'hidden',
	textOverflow: 'ellipsis',
	textAlign: 'center',
	padding: '0 1em',
	fontWeight: 'bold',
	fontSize: '1.2em',
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
});
